<template>
	<view>
		<!-- 导航栏 -->
		<view class="top">
			<view class="nav">
				<view :class="selectType==1?'nav_item active_left_item':'nav_item'" @click="history">
					<uni-icons type="eye" size="25" :color="selectType==1?'white':''"></uni-icons><text>历史</text>
				</view>
				<view :class="selectType==2?'nav_item active_right_item':'nav_item'" @click="start">
					<uni-icons type="heart" size="25" :color="selectType==2?'white':''"></uni-icons><text>收藏</text>
				</view>
			</view>
		</view>
		<!-- 历史 -->
		<view style="padding: 30rpx;" v-if="selectType==1">
			<view class="list_move" v-for="(item,index) in historyList" :key="index">
				<image :src="item.img" class="list_img"></image>
				<view class="move">
					<view class="move_name">{{item.movie_name}}</view>
					<view class="jindu">上次播放至:{{item.playTime | formaTime}}</view>
					<view class="jixu" @click="playContinues(index)">继续播放</view>
				</view>
			</view>
		</view>
		<view v-else style="padding: 30rpx;">
			<view class="list_move" v-for="(item,index) in startList" :key="index">
				<image :src="item.img" class="list_img"></image>
				<view class="move">
					<view class="move_name">{{item.movie_name}}</view>
					<view class="jindu about">{{item.active_about}}</view>
					<view class="jixu" @click="toDetail(item._id)">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectType: "",
				historyList: "",
				startList: ""
			}
		},
		methods: {
			history() {
				this.selectType = 1
			},
			start() {
				this.selectType = 2
			},
			// 获取播放记录
			getHistoryList() {
				let historyList = uni.getStorageSync("playRecord")
				this.historyList = historyList
			},
			// 获取收藏
			getStartList() {
				let collectionList = uni.getStorageSync("collectionList")
				this.startList = collectionList
			},
			// 继续播放
			playContinues(index) {
				uni.navigateTo({
					url: `../play/play?history=${index}`
				})
			},
			// 查看详情
			toDetail(id){
				uni.navigateTo({
					url:`../detail/detail?id=${id}`
				})
			}
		},
		onLoad(option) {
			if (option.page == "历史") {
				this.selectType = 1
			}
			if (option.page == "收藏") {
				this.selectType = 2
			}
			this.getHistoryList()
			this.getStartList()
		},
		onShow() {
			this.getHistoryList()
			this.getStartList()
		},
		filters: {
			formaTime(time) {
				var secondTime = parseInt(time); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime >= 60) {
					minuteTime = parseInt(secondTime / 60);
					secondTime = parseInt(secondTime % 60);
					if (minuteTime >= 60) {
						hourTime = parseInt(minuteTime / 60);
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				var result = "" + (parseInt(secondTime) < 10 ? "0" + parseInt(secondTime) : parseInt(secondTime));


				result = "" + (parseInt(minuteTime) < 10 ? "0" + parseInt(minuteTime) : parseInt(minuteTime)) + ":" +
					result;

				result = "" + (parseInt(hourTime) < 10 ? "0" + parseInt(hourTime) : parseInt(hourTime)) + ":" + result;

				return result;
			}
		}
	}
</script>

<style scoped>
	.nav {
		display: flex;
		border: 1px solid rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
		align-items: center;
	}

	.top {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.nav_item {
		padding: 10rpx 40rpx;
		/* color: white; */
		display: flex;
		align-items: center;
		/* height: 100%; */
	}

	.active_left_item {
		background-color: #f49c36;
		/* border-radius: 40rpx; */
		border-bottom-left-radius: 40rpx;
		border-top-left-radius: 40rpx;
		color: white;
	}

	.active_right_item {
		background-color: #f49c36;
		/* border-radius: 40rpx; */
		border-bottom-right-radius: 40rpx;
		border-top-right-radius: 40rpx;
		color: white;
	}

	.list_img {
		width: 230rpx;
		height: 350rpx;
		border-radius: 20rpx;
	}

	.list_move {
		display: flex;
		background-color: #f5f5f5;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.move {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 40rpx;
		margin-bottom: 20rpx;

	}

	.move_name {
		font-size: 35rpx;
		font-weight: 600;
		color: #828282;
	}

	.jindu {
		font-size: 25rpx;
		color: #828282;
	}

	.jixu {
		background-color: #f4d13a;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.about {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 380rpx;
	}
</style>
